<template>
	<view class="page">
		<view class="title">请选择配送方式</view>
		<view class="list-box">
			<radio-group @change="onChoose">
				<label class="item-box" v-for="(item,index) in listData" :key="index">
					<radio :value="item.delivery_id" color="#E81526" 
					:checked="item.delivery_id == delivery_id ? true : false"
					 style="transform: scale(.9);"/><text class="label-text">{{item.delivery_name}}</text>
				</label>
			</radio-group>
		</view>
		<view class="submit-btn" @tap="onSubmit">确定</view>
	</view>
</template>

<script>
	import {getDeliveryListApi,postDeliveryChooseApi} from '@/api/user.js'
	import {mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['user_id','token'])
		},
		data() {
			return {
				address_id: null,
				listData: [],
				delivery_id: ''
			};
		},
		onLoad({address_id = null,delivery_id = ''}) {
			this.address_id = address_id
			this.delivery_id = delivery_id
			this.getDeliveryList()
		},
		methods: {
			onChoose(e) {
				this.delivery_id = e.detail.value
			},
			async getDeliveryList() {
				const res = await getDeliveryListApi({
					user_id: this.user_id,
					token: this.token,
					address_id: this.address_id
				})
				this.listData = res.data.info
				console.log(res)
			},
			async onSubmit() {
				const res = await postDeliveryChooseApi({
					delivery_id: this.delivery_id
				})
				for (let i = 0; i < this.listData.length; i++) {
					if(this.listData[i].delivery_id === this.delivery_id) {
						uni.$emit('chooseDelivery',this.listData[i])
						uni.navigateBack()
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #f4f4f4;
}
.title {
	height: 120rpx;
	line-height: 120rpx;
	padding-left: 30rpx;
}
.list-box {
	background-color: #ffffff;
	.item-box {
		border-bottom: 1rpx solid #f5f5f5;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		display: block;
		.label-text {
			font-size: 28rpx;
			color: #333333;
		}
	}
}
.submit-btn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 750rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 28rpx;
	color: #ffffff;
	background-color: #E81526;
}
</style>
